<template>
  <el-dialog
    :title="isEdit?$t('message.edit') + $t('message.jp'):$t('message.add') + $t('message.jp')"
    :visible.sync="isShow"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="600px"
    @close="closePrize"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-suffix="："
      label-width="auto"
    >
      <el-form-item :label="$t('message.jplx')" prop="acType">
        <el-select v-model="form.acType" :placeholder="$t('message.qxz')" :disabled="isEdit" filterable clearable style="width: 100%;" @change="acTypeChange">
          <el-option
            v-for="item in prizeType()"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="isCustom" ref="prizeItem" :label="$t('message.jp')" prop="prizeId">
        <el-select v-model="form.prizeId" :placeholder="$t('message.qxz')" :disabled="isEdit" filterable clearable style="width: 100%;">
          <el-option
            v-for="item in prizeList"
            :key="item.prizeId"
            :value="item.prizeId"
            :label="item.prizeName"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.acType!=3" :label="form.acType==2?$t('message.zjzje'):(form.acType==1?$t('message.zjzjf'):$t('message.jznum'))" prop="totalNum">
        <el-input
          v-model="form.totalNum"
          :placeholder="form.acType==2?$t('message.qxz') + $t('message.zjzje')+ '(' + $t('message.dbbxz') + ')':(form.acType==1?$t('message.qxz') + $t('message.zjzjf')+ '(' + $t('message.dbbxz') + ')':$t('message.qxz') + $t('message.jpsl')+ '(' + $t('message.dbbxz') + ')')"
          onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        />
      </el-form-item>
      <el-form-item v-if="form.acType!=3" :label="form.acType==2?$t('message.dczjje'):(form.acType==1?$t('message.dczjjf'):$t('message.dczjsl'))" prop="prizeNum">
        <el-input
          v-model="form.prizeNum"
          :placeholder="form.acType==2?$t('message.qsrdczjje'):(form.acType==1?$t('message.qsr') + $t('message.dczjjf'):$t('message.qsr') + $t('message.dczjsl'))"
          onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        />
      </el-form-item>
      <el-form-item v-if="form.acType==3" :label="$t('message.wzjtsy')" prop="prizeName">
        <el-input v-model="form.prizeName" :disabled="isEdit" :placeholder="$t('message.qsr')" />
      </el-form-item>
      <el-form-item :label="$t('message.zjz')" prop="ratio">
        <el-input
          v-model="form.ratio"
          :placeholder="$t('message.qsrzjz')"
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        />
      </el-form-item>
      <el-form-item :label="$t('message.sort')" prop="sort">
        <el-input
          v-model="form.sort"
          oninput="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
          :placeholder="$t('message.qsr') + $t('message.sort')"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="custome-footer">
      <div>
        <el-button @click="isShow=false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick type="primary" @click="confirmAction">{{ $t('message.qr') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getPrizeListByType, addLuckdrawPrize, getLuckdrawPrizeDetial, updateLuckdrawPrize } from '@/api'
import { nextTick } from 'process'
import store from '@/store'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      isEdit: false,
      isShow: false,
      form: {
        acType: '',
        prizeId: '',
        ratio: '',
        sort: '',
        prizeName: '',
        prizeNum: '',
        totalNum: '',
        id: ''
      },
      isCustom: false,
      // prizeType: [],
      prizeList: [],
      tempPrize: {},
      rules: {
        acType: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.jplx'), trigger: 'change' }
        ],
        prizeId: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.jp'), trigger: 'change' }
        ],
        totalNum: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.jpsl'), trigger: 'blur' }
        ],
        prizeNum: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.dczjsl'), trigger: 'blur' }
        ],
        ratio: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.zjz'), trigger: 'blur' }
        ],
        prizeName: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.tsy'), trigger: 'blur' }
        ],
        sort: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.sort'), trigger: 'blur' }
        ]
      }
    }
  },
  inject: ['prizeType'],
  methods: {
    open(acId, id) {
      this.isShow = true
      this.isEdit = false
      this.form.acId = acId
      this.$nextTick(() => { this.initData(id) })
    },
    initData(id) {
      if (id !== undefined) {
        this.isEdit = true
        getLuckdrawPrizeDetial({ param: { id }})
          .then(res => {
            const { record } = res
            this.form.id = record.id
            this.form.prizeName = record.prizeName
            this.form.acType = record.acType
            this.form.prizeId = record.prizeId
            this.form.prizeNum = record.prizeNum
            this.form.totalNum = record.totalNum
            this.form.sort = record.sort
            this.form.ratio = record.ratio
            this.isCustom = record.isCustom === '1'
            // this.getPrizeList(this.form.acType)
            this.prizeList = [{ prizeName: record.prizeName, prizeId: record.prizeId }]
          })
      }
    },
    closePrize() {
      this.isCustom = false
      this.tempPrize = {}
      this.prizeList = []
      this.$refs.form.resetFields()
      this.form.prizeName = ''
      this.form.id = ''
    },
    acTypeChange(acType) {
      this.tempPrize = {}
      this.prizeList = []
      this.getPrizeList(acType)
    },
    getPrizeList(acType) {
      if (acType === 3) {
        this.isCustom = false
        this.form.totalNum = 0
        this.form.prizeNum = 1
        return
      }
      this.isCustom = true
      const tempItem = this.prizeType().find((item) => item.id === acType)
      if (tempItem && tempItem.isCustom === '0') {
        this.isCustom = false
        this.form.prizeNum = 1
        this.form.prizeId = acType
        return
      }
      nextTick(() => {
        this.$refs.prizeItem.resetField()
      })
      getPrizeListByType({
        param: { acType }
      })
        .then(res => {
          this.prizeList = res.recordList
        })
    },
    prizeChange(v) {
      this.tempPrize = this.prizeList.find((item) => item.prizeId === v)
    },
    confirmAction() {
      const form = { ...this.form, venueId: sessionStorage.getItem('venueId') }
      if (this.isCustom) {
        const prize = this.prizeList.find((item) => item.prizeId === form.prizeId)
        form.imgFolder = prize.imgFolder
        form.pic = prize.pic
        form.prizeName = prize.prizeName
      }
      const action = form.id ? updateLuckdrawPrize : addLuckdrawPrize
      action({ param: form })
        .then(res => {
          if (res.errorCode === '000000') {
            if (form.id) {
              this.$message.success(this.$t('message.editcg'))
            } else {
              this.$message.success(this.$t('message.addcg'))
            }
            this.$parent.getList(1)
            this.isShow = false
          }
        })
    }
  }
}

</script>
